<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/15
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>职称信息管理</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
.layui-form-item {
	height: 30px;
}
</style>
</head>
<body>
	<script src="../layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'layer', 'table', 'jquery', 'form', 'laydate' ],
				function() {
					const layer = layui.layer; //使用过程必须声明(实例化对象)
					const table = layui.table;
					const $ = layui.jquery;
					const form = layui.form;
					const laydate = layui.laydate;
					//输入项正则
					form.verify({
			            jtcode: [
			                /^[A-Z0-9]+$/,
			                '职称编码为大写字母加数字'
			            ]
						, jtname: [
							/^[\w\u4e00-\u9fa5]+$/, 
				 			'职称名不得含有特殊字符！'
		            	]
			        });
					
					$.post("../depart/list", function(data) {
						var dd = eval("(" + data + ")");
						if (dd) {
							$.each(dd, function(index, item) {

								$('#did')
										.append(
												new Option(item.dname,
														item.did));//往下拉菜单里添加元素

							})
							form.render();
						}
					});
					table.render({
						elem : '#demo',
						url : '../jobtitle/listPage' //数据接口
						,
						title : '职称信息表',
						page : true //开启分页
						,
						cols : [ [ //表头

						{
							field : 'jtid',
							type : 'checkbox',
							fixed : 'left'
						}, {
							field : 'jtcode',
							title : '职称编码'
						}, {
							field : 'jtname',
							title : '名称'
						}, {
							field : 'departList',
							title : '所属部门',
							templet : function(data) {
								return data.departList.dname;

							}
						}, {
							field : 'jtdesc',
							title : '职称描述',
							
						}, {
							field : 'jtremark',
							title : '备注',
						}

						, {
							fixed : 'right',
							align : 'center',
							toolbar : '#barDemo'
						} ] ]
					});
					table.on('tool(test)', function(obj) {
						const method = obj.event;
						if ('edit' === method) {//修改
							layer.open({ //修改该之前弹出对话框
								type : 1,
								offset: '0px',
								area : [ '350px' ],
								title : '修改职称信息',
								content : $("#edit-dialog").html()
							});

						
							$.post("../depart/list", function(data) {
								var dd = eval("(" + data + ")");
								if (dd) {
									$('#edit-depart').append(
											"<option selected ='selected' value='" + obj.data.departList.did + "'>"
													+ obj.data.departList.dname
													+ "</option>")

									$.each(dd, function(index, item) {

										$('#edit-depart')
												.append(
														new Option(item.dname,
																item.did));//往下拉菜单里添加元素

									})
									form.render();
								}
							});
							if(obj.data.tag=='0'){

			                    $('#tag-unuse').attr("checked","'checked'")
			                }else if(obj.data.tag=='1'){

			                    $('#tag-use').attr("checked","'checked'")
			                }
							form.val('edit-load-data', {//填充修改表单

								'jtid' : obj.data.jtid,
								'jtcode' : obj.data.jtcode,
								'jtname' : obj.data.jtname,
								'jtdesc' : obj.data.jtdesc,
								'jtremark' : obj.data.jtremark
							})

							//提交修改数据到后台
							form.on('submit(edit-submit)', function(d) {
								$.post('../jobtitle/update', d.field, function(
										flag) {
									if (flag) {
										layer.msg('修改成功');
										table.reload('demo');
										layer.closeAll('page');//关闭修改对话框
									} else {
										layer.msg('修改失败');
									}

								})
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});

						} else if ("next" === method) { //删除
							
								$.post('../jobtitle/remove', {//提交ajax删除
									"jtid" : obj.data.jtid
								}, function(flag) {
									if (flag) {
										layer.msg('删除成功');
										table.reload('demo');
									}else{
										layer.msg('删除失败');
									}
								})
							

						}
					})

					$("#btn-add").click(
							function() {
								layer.open({
									type : 1,
									offset: '0px',
									area : [ '350px' ],
									title : '增加职称信息',
									content : $("#add-dialog").html()
								});
								
								$.post("../depart/list", function(data) {
									var dd = eval("(" + data + ")");
									if (dd) {

										$.each(dd, function(index, item) {

											$('#add-depart').append(
													new Option(item.dname,
															item.did));//往下拉菜单里添加元素

										})
										form.render();
									}
								});

								//监控提交表单按钮
								form.on('submit(add-submit)', function(d) {
									$.post('../jobtitle/add', d.field, function(
											flag) {
										if (flag) {
											layer.msg('添加成功');
											table.reload('demo');
											layer.closeAll('page');//关闭添加对话框
										} else {
											layer.msg('添加失败');
										}

									})
									return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
								});

							})

					//条件搜索
		$("#btn-search").click(
			function() {
				table.reload('demo', {
					where : {
						//所有条件
						did : $("#did").val(),
						jtname : $("#jtname").val(),
						tag: $("#tag").val(),
					}
				})
			}
		)

				})
	</script>
	<form class="layui-form">
		<div class="layui-row" style="height:50px">
			<button type="button" class="layui-btn layui-btn-normal" id="btn-add">
				<i class="layui-icon">&#xe654;</i>增加职称
			</button>
		</div>
		<div class="layui-row" style="height:50px">
			职称名称
			<div class="layui-inline">
   				  <input type="text" name="jtname"  id="jtname" required lay-verify=""
                           placeholder="" autocomplete="off" class="layui-input">
            </div>
			所属部门
			<div class="layui-inline">
				<select name="did" id="did">
					<option value="">请选择部门</option>
				</select>
			</div>
			是否启用
			<div class="layui-inline">
				<select name="tag" id="tag">
					<option value="">请选择</option>
					<option value="1">是</option>
					<option value="0">否</option>
				</select>
			</div>
			<div class="layui-inline">
				<button type="button" class="layui-btn" id="btn-search">
					<i class="layui-icon">&#xe615;</i>查询
				</button>

			</div>

		</div>
		<div class="demoTable">

		
			

		</div>
	</form>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="next">删除职称</a>
</script>


	<script type="text/html" id="edit-dialog">
    <form class="layui-form" action=""  lay-filter="edit-load-data">
		<div class="layui-row" >
			<div class="layui-col-md12" style="height:20px">
				<div class="layui-form-item" >
					<label class="layui-form-label"></label>
				</div>
			</div>
		</div>
        <div class="demoTable">

            <div class="layui-form-item">
                <label class="layui-form-label">职称编码</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtcode" required lay-verify="jtcode"
                           placeholder="请输入职称编码" autocomplete="off" class="layui-input" style="width:190px">
        <input type="hidden" name="jtid">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtname"  required lay-verify="jtname"
                           placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>
 
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-block" style="width:190px">
                    <select id="edit-depart" name="did">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
			<div class="layui-inline">
                 <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                    <input type="radio" id="tag-unuse" name="tag" value="0" title="未启用" >
                    <input type="radio" id="tag-use" name="tag" value="1" title="启用">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">职称描述</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtdesc"  
                           placeholder="请输入职称描述" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtremark"  
                           placeholder="请输入备注" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit-submit">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </div>
    </form>
</script>
	<!--      添加对话框 -->
	<script type="text/html" id="add-dialog">
    <form class="layui-form" action=""  lay-filter="add-load-data">


		<div class="layui-row" >
			<div class="layui-col-md12" style="height:20px">
				<div class="layui-form-item" >
					<label class="layui-form-label"></label>
				</div>
			</div>
		</div>
        <div class="demoTable">

                <div class="layui-form-item">
                <label class="layui-form-label">职称编码</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtcode" required lay-verify="jtcode"
                           placeholder="请输入职称编码" autocomplete="off" class="layui-input" style="width:190px">
     

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtname"  required lay-verify="jtname"
                           placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>
 
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-block" style="width:190px">
                    <select id="add-depart" name="did">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
			<div class="layui-inline">
                 <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                    <input type="radio"  name="tag" value="0" title="未启用" checked='checked'>
                    <input type="radio"  name="tag" value="1" title="启用">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">职称描述</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtdesc"  
                           placeholder="请输入职称描述" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input  type="text" name="jtremark"  
                           placeholder="请输入备注" autocomplete="off" class="layui-input" style="width:190px">

                </div>
            </div>


            <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-submit">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </div>
    </form>
</script>
</body>
</html>
